<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>vuedemo</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>
<body>
  <div id="app" class="container col-md-6 col-md-offset-3">
    <h3>{{message}}</h3>
    <table class="table table-hover" v-cloak>
      <thead>
        <tr>
          <th @click="sortBy('id')">序号</th>
          <th>书名</th>
          <th>作者</th>
          <th @click="sortBy('price')">价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.author}}</td>
          <td>{{item.price}}</td>
          <td>
            <button type="button" class="btn btn-danger" @click="delBook(index)">删除</button>
            <button type="button" class="btn btn-danger" @click="modBook(index)">修改</button>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <h4>总价：{{sum}}</h4>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="add-book">
      <legend>添加书籍</legend>
      <div class="form-group">
        <label for="name">书名</label>
        <input type="text" v-model="book.name" class="form-control" id="name" placeholder="书名">
      </div>
      <div class="form-group">
        <label for="author">作者</label>
        <input type="text" v-model="book.author" class="form-control" id="author" placeholder="作者">
      </div>
      <div class="form-group">
        <label for="price">价格</label>
        <input type="text" v-model="book.price" class="form-control" id="price" placeholder="价格">
      </div>
      <button class="btn btn-primary btn-block" @click="addBook()">添加</button>
      <button class="btn btn-primary btn-block" @click="updataBook()">更新</button>
    </div>
  </div>

  <script type="text/javascript">
    new Vue({
      el:'#app',
      data: {
        message:'Vue Demo',
        book: {
          id: 0,
          author: '',
          name: '',
          price: ''
        },
        upbook:'',
        // books:[],
        books: [{
            id: 1,
            author: '曹雪芹',
            name: '红楼梦',
            price: 32.0
        }, {
            id: 2,
            author: '施耐庵',
            name: '水浒传',
            price: 30.0
        }, {
            id: '3',
            author: '罗贯中',
            name: '三国演义',
            price: 24.0
        }, {
            id: 4,
            author: '吴承恩',
            name: '西游记',
            price: 20.0
        }]
      },
      computed: {
        sum: function() {
            var result = 0;
            for (var i = 0; i < this.books.length; i++) {
                result += Number(this.books[i].price)
            };
            return result;
        }
      },
      methods:{
        addBook:function(){
            this.book.id = this.books.length + 1;
            this.upbook = JSON.parse( JSON.stringify(this.book) );
            this.books.push( this.upbook );
            this.book.name ='';
            this.book.author = '';
            this.book.price = '';
        },
        delBook:function(index){
          this.books.splice(index,1);
          this.changeIndex();
        },
        modBook:function(index){
          this.selected = index;
          this.upbook= this.books[index];
          this.book = JSON.parse( JSON.stringify(this.upbook) );
        },
        updataBook:function(){
          this.upbook = JSON.parse( JSON.stringify(this.book) );
          this.$set(this.books, this.selected, this.upbook);
          this.book.name ='';
          this.book.author = '';
          this.book.price = '';
        },
        sortBy:function(sortparam){
          this.books.sort(function(a,b){
            return a[sortparam] - b[sortparam];
          });
        },
        changeIndex:function() {
          for(var i=0;i<this.books.length;i++){
            this.books[i].id=i+1;
          }
        }
      }
    });
  </script>

</body>
</html>